﻿<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/mui.picker.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/app/home/work-list.css" />
        <link href="../../css/app/home/build_search.css" rel="stylesheet" />
		<style type="text/css">
			.mui-scroll {
				overflow-y: hidden;
			}
		</style>
	</head>

	<body style="background-color:#F5F5F5;">
        <!-- 侧滑导航根容器 mui-draggable-->
        <div id="app" class="mui-off-canvas-wrap mui-slide-in">
            <!-- 查询容器 -->
            <aside class="mui-off-canvas-right" id="searchArea">
                <div class="mui-content smp-canvas-content">
                    <div class="mui-input-row mui-search">
                        <input id="search" v-on:keyup="searchList($event)" v-model="search.title" type="search" class="mui-input-clear" placeholder="请输入关键字" />
                        <a href="#searchArea" v-on:tap="cancleSearchArea()" class="a-cancle rbtn">取消</a>
                    </div>
                    <div id="build-scroll" class="mui-scroll-wrapper" style="top:44px;">
                        <div class="mui-scroll">
                            <!--自动搜索下拉列表-->
                            <div v-show="search.title.length>0">
                                <ul class="ul-common mui-table-view">
                                    <li v-on:tap="sltWordsSearch(item)" v-for="item in autoSearchList" class="mui-table-view-cell" v-text="item.TITLE"></li>
                                </ul>
                            </div>
                            <div v-show="search.title.length==0">
                                <!--历史记录-->
                                <ul class="ul-history mui-table-view">
                                    <li class="mui-table-view-cell mui-collapse mui-active">
                                        <a class="mui-navigate-right" href="#">历史记录</a>
                                        <div class="mui-collapse-content no-margin">
                                            <div v-if="historyList.length>0" class="mui-input-group">
                                                <div v-for="item in historyList" class="mui-input-row onerow" v-text="item.name" v-on:tap="historyDetail(item)"></div>
                                            </div>
                                            <div v-else class="mui-input-group"><div class="mui-input-row onerow">暂无历史记录</div></div>
                                        </div>
                                        <span class="spn-clear fr" v-on:tap="clearHistoryList()">
                                            <i class="mui-icon mui-icon-trash i-clear"></i>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
            <header id="header" class="mui-bar mui-bar-nav" style="height: 80px;">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <input type="hidden" id="hidfMenuId" value="" />
                <h1 class="mui-title" v-text="title">工作台</h1>
                <div class="mui-segmented-control">
                    <div class="divHeader no-underline">
                        <a class="mui-control-item" v-on:tap="getAllDistrictTree()">
                           <span v-text="curDistrict">行政区域</span><i class="mui-icon mui-icon-arrowdown"></i></a>
                        <a class="mui-control-item" v-on:tap="showSearchArea()" href="#searchArea">
                        <span v-text="charLength(curBuildName)">建筑名称</span><i class="mui-icon mui-icon-arrowdown"></i></a>
                        <a class="mui-control-item" v-on:tap="openOrderStatus()">
                    <span v-text="curStatusName">工单状态</span><i class="mui-icon mui-icon-arrowdown"></i></a>
                </div>
                </div>
            </header>
            <div id="pullrefresh" class="mui-content">
                <ul id="pullrefreshUl">
                    <li>
                        <div v-show="isEmptyData" class="empty-container">
                            <div class="nodata-info">暂无工单信息</div>
                            <div class="nodata-icon"><span class="mui-icon iconfont icon-gongdan"></span></div>
                        </div>
                        <div v-show="list.length>0" v-for="(item,index) in list" class="mui-card">
                            <ul class="mui-table-view">
                                <li class="mui-table-view-cell mui-media">
                                    <div v-on:tap="open_detail(item)">
                                        <div class="mui-card-header">
                                            <div><span class="spnOrderNO">工单号：</span><span class="spn-order" v-text="item.orderNumber"></span></div>
                                            <div class="font-topright" v-text="getStatusName(item.status)"></div>
                                            <div class="triangle-topright" v-bind:class="getStatusColorById(item.status)"></div>
                                        </div>
                                        <div class="mui-media-body">
                                            <div class="middle-inner" v-bind:class="{ptop:item.hour==0}">
                                                <div class="div-tag" v-show="item.hour!=0">
                                                    <button v-show="item.money!=0" type="button" class="mui-btn mui-btn-warning mui-btn-outlined"><span class="mui-icon iconfont icon-jichutubiao_jiangli"></span>奖励 ¥ <span v-text="item.money"> </span></button>
                                                    <button v-show="item.hour!=0" type="button" class="mui-btn mui-btn-warning mui-btn-outlined"><span v-text="item.hour"> </span>小时完成</button>
                                                </div>
                                                <div class="floatLeft middle">
                                                    <span class="fl" v-text="item.title"></span>
                                                    <span v-if="typeid==TaskType.repair.value&&item.IS_URGENCY==1" class="mui-badge mui-badge-warning floatLeft">紧急</span>
                                                </div>
                                                <div style="clear: both;"></div>
                                                <p class='mui-ellipsis' v-text="item.msg"></p>
                                            </div>
                                        </div>
                                        <div v-if="item.IsOverTime==1" class="font-seal">已过期</div>
                                        <div v-if="typeid==TaskType.repair.value&&item.IS_WAITING==1" class="font-seal">待料</div>
                                    </div>
                                    <div class="mui-card-footer">
                                        <span v-text="item.datetime"></span>
                                        <div v-show="!(item.IsOverTime==1)">
                                            <!--班组-->
                                            <div v-if="item.status==WorkOrderStatus.waitOrder.value&&roleid==comm.leader" class="divWaitDispatching" v-cloak>
                                                <button type="button" v-on:tap="dispatching(item,'P',false)" class="mui-btn mui-xbtn-primary mui-btn-outlined b1">派工</button>
                                                <button type="button" v-show="item.CREATE_USER_ID != config.USER_ID" v-on:tap="grabOrder(item)" class="mui-btn mui-xbtn-primary">立即抢单</button>
                                            </div>
                                            <button v-if="item.status==WorkOrderStatus.waitOrder.value&&roleid==comm.pm" type="button" class="mui-btn mui-xbtn-primary" v-on:tap="dispatching(item,'P',false)">派工</button>
                                            <button type="button" v-if="(item.status==WorkOrderStatus.waitSignin.value||item.status==WorkOrderStatus.waitOver.value)&&roleid==comm.pm" class="mui-btn mui-xbtn-primary mui-btn-outlined" v-on:tap="dispatching(item,'Z',false)">转单</button>
                                            <button type="button" v-if="item.status==WorkOrderStatus.waitSignin.value&&item.ACCEPT_USER_ID==config.USER_ID" class="mui-btn mui-xbtn-primary" v-on:tap="signin(item)">签到</button>
                                            <button type="button" v-if="item.status==WorkOrderStatus.waitOver.value&&item.ACCEPT_USER_ID==config.USER_ID" class="mui-btn mui-xbtn-primary" v-on:tap="overWork(item)" v-bind:disabled="item.IS_WAITING==1">完工</button>
                                            <button type="button" v-if="!(typeid==TaskType.repair.value)&&showAudit(item)" class="mui-btn mui-xbtn-primary" v-on:tap="audit(item)">评价</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 主页面容器 -->
            <div class="mui-inner-wrap">
            </div> 
        </div>
        <!--报修时间-->
        <div id="repair-datetime" class="mui-popover mui-popover-action" style="top:84px;">
            <ul class="mui-table-view mui-table-view-radio">
                <li class="mui-table-view-cell mui-selected" v-on:tap="sltRepairDate(-365)">
                    <a class="mui-navigate-right">
                        全部
                    </a>
                </li>
                <li class="mui-table-view-cell" v-on:tap="sltRepairDate(0)">
                    <a class="mui-navigate-right">
                        今天
                    </a>
                </li>
                <li class="mui-table-view-cell" v-on:tap="sltRepairDate(-7)">
                    <a class="mui-navigate-right">
                        本周
                    </a>
                </li>
                <li class="mui-table-view-cell" v-on:tap="sltRepairDate(-30)">
                    <a class="mui-navigate-right">
                        本月
                    </a>
                </li>
            </ul>
            <div class="divFooter">
                <input id="txtStartDate" data-options='{"type":"date"}' type="text" readonly="readonly" /><span>至</span><input id="txtEndDate" data-options='{"type":"date"}' type="text" readonly="readonly" />
                <button v-on:tap="sltRepairDate(-1)" class="mui-btn mui-xbtn-primary">确认</button>
            </div>
        </div>
		<div id="popover" class="mui-popover mui-popover-bottom mui-popover-action">
			<div class="divHeader">
				执行人员选择
				<a href="#popover"><span class="mui-icon mui-icon-closeempty f-rigth"></span></a>
			</div>
			<div class="mui-scroll-wrapper" id="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view do-persons">
						<li v-for="(item,index) in list" class="mui-table-view-cell" v-cloak>
							<span v-html="item.typeName"></span>
							<div class="mui-radio mui-right f-rigth">
								<input name="cbx" v-bind:id="'cbx_'+item.id" v-bind:value="item.id" type="radio">
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="divFooter">
				<button v-on:tap="btnSure()" class="mui-btn next-btn mui-btn-lightBlue">确认</button>
			</div>
		</div>
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/libs/vue.min.js"></script>
		<script type="text/javascript" src="../../js/libs/mui.picker.min.js"></script>
		<script type="text/javascript" src="../../js/common/config.js"></script>

        <script src="../../js/common/webSql.js"></script>
        <script src="../../js/libs/mock-min.js"></script>
        <script type="text/javascript" src="../../js/common/global.js"></script>
        <script src="../../js/common/mockdata.js"></script>

        <script type="text/javascript" src="../../js/common/json.js"></script>
        <script type="text/javascript" src="../../js/common/web-storage-cache.js"></script>
		<script type="text/javascript" src="../../js/app/home/work-list.js"></script>
		<script type="text/javascript" src="../../js/app/home/divWaitDispatching.js"></script>
		<script type="text/javascript">
            var _database = new smpWebSql();
            //_database.delTable('tb_billfile_g', function () {
            //    console.log("数据表tb_billfile_g删除成功");
            //});
            var ow = null;
            var old_back = mui.back;
            var dateApp = new Vue({
                el: "#repair-datetime",
                methods: {					//选择报修日期
                    sltRepairDate: function (id) {
                        mui('#repair-datetime').popover('hide');
                        getListBySltRepairDate(id, g.id('txtStartDate').value, g.id('txtEndDate').value);
                    }
                }
            });
			var app = new Vue({
				el: "#app",
				data: app_Data,
				methods: {
					//显示评价
					showAudit: function(item) {
						return item.status == WorkOrderStatus.waitAudit.value && ((item.CREATE_USER_ID == config.USER_ID && app.typeid == TaskType.repair.value) || app.typeid != TaskType.repair.value);
					},
					//派工
					dispatching: function (item,tag,isDel) {
					    if (persons.list.length == 0) {
					        mui.toast('暂无派工人员信息');
					        return;
					    }
						persons.NO = item.orderNumber;
						persons.typeid = app.typeid;
						persons.isDel = isDel;
						if (tag != undefined) {
						    persons.operationType = tag;
						}
						if (app.list.length < 3) {
						    document.getElementById('pullrefresh').style.height = g.getScreenInfo('height') + 1 + 'px';
						}
						window.scrollTo(1, 1);
						mui('#popover').popover('toggle'); //show hide toggle
						persons.getUsers(persons);
					},
					//根据主题获取颜色
					getStatusColorById: function(status) {
						return g.getStatusColorById(status);
					},
					//根据ID获取状态名
					getStatusName: function(statusid) {
					    return  g.getStatusNameById(statusid, true);
					},
					//拍照签到
					signin: function(item) {
						signinFun(app.typeid, item, '');
					},
					//完工
					overWork: function(item) {
						overWorkFun(item, '');
					},
					//审核评价
					audit: function(item) {
						var _url = app.typeid + '/sure.html';
						g.openWindow({
							id: 'repair_sure',
							url: _url,
							extras: {
								NO: item.orderNumber,
								typeid: app.typeid,
								tag: ''
							}
						});
					},
					//抢单
					grabOrder: function(item) {
						grabOrderFun(item);
					},
					//打开详情页面
					open_detail: function(item) {
						open_detailFun(item);
					},
					//工单状态
					openOrderStatus: function() {
						openOrderStatusFun('manage');
					},
					//获取设备类型
					GetEqtWork: function() {
						GetEqtWorkFun();
					},
					//选择时间
					openDateTime: function() {
						window.scrollTo(1, 1); //解决picker和下拉刷新同时存在的bug，picker显示时不执行下拉刷新
						mui('#repair-datetime').popover('toggle');
					},
					//获取部门列表
					GetDepartment: function () {
					    GetDepartmentFun();
					},
				    //所属楼栋
					GetBuilds: function () {
					    GetBuildsFun();
					},
				    //------------搜索相关的---------
				    //获取行政区域树
					getAllDistrictTree: function () {
					    getAllDistrictTreeFun();
					},
				    //返回
					goBack: function () {
					    mui('#searchArea').offCanvas().close();
					},
					searchList: function (event) {
					    var txt = event.target.value;
					    getListByKey(txt);
					},
					showSearchArea: function () { //显示查询界面
					    document.body.classList.add('mui-fullscreen');
					    displayHistory();
					    document.getElementById("search").click();
					    toBuildList();
					},
				    //取消查询
					cancleSearchArea: function () {
					    app.search.title = ''; //清空搜索关键字
					    app.cancleSearchAreaFun();
					    findData = [];
					    document.body.classList.remove('mui-fullscreen');
					    document.activeElement.blur();
					},
				    //清空历史记录
					clearHistoryList: function () {
					    //console.log('clear') 
					    mui.confirm('确定删除历史记录吗', '删除确认', btnArray, function (e) {
					        if (e.index == 1) {
					            var _key = 'BuildHistoryList' + app.typeid;
					            wsCache.delete(_key);
					            displayHistory();
					        }
					    });
					},
					cancleSearchAreaFun: function () {
					    if (this.w_repair.buildId != '') {
					        this.w_repair.buildId = '';
					        this.curBuildName = '建筑名称';
					        getListAll();
					    }
					},
					getSelectBuildId: function (id) {
					    if (app.typeid == TaskType.repair.value) {
					        this.w_repair.buildId = id;
					    } 
					},
				    //选择搜索结果进行查询
					sltWordsSearch: function (val) {
					    //1.添加历史记录
					    var _key = 'BuildHistoryList' + app.typeid;
					    addHistory(_key, val.TITLE, val.ID, val.ADDRESS);
					    app.search.title = ''; //清空搜索关键字
					    //3.执行搜索
					    app.getSelectBuildId(val.ID);
					    this.curBuildName = val.TITLE;
					    this.goBack();
					    getListAll();
					},
				    //记录详情
					historyDetail: function (item) {
					    //console.log(JSON.stringify(item))
					    app.getSelectBuildId(item.id);
					    this.curBuildName = item.name;
					    this.goBack();
					    getListAll();
					},
				    //截取超出字符串长度
					charLength: function (value) {
					    if (!value) return ''
					    return value.length > 7 ? value.substr(0, 7) : value;
					}
				},
				mounted: function() {
				    var _self = this;			
				    mui.ready(function () {
				        eventListener();
				        document.body.classList.remove('mui-fullscreen');
				        if (mui.os.ios) {
				            document.getElementById('search').addEventListener('input', function (e) {
				                //console.log('this.value:' + this.value)
				                getListByKey(this.value);
				            });
				        }
				        g.initScroll({
				            id: 'build-scroll',
				            h: g.getScreenInfo('height') - 60 + "px"
				        });
				    });
				    mui.plusReady(function () {
				        var vm = plus.webview.currentWebview();
				        ow = vm.opener();
				        //重写返回逻辑，返回时刷新父页面待处理任务数
				        mui.back = function () {
				            ow.evalJS("app.loadTaskNum()"); //刷新任务数
				            old_back();
				        }
						_self.typeid = vm.typeid;
						_self.title = vm.title;
						persons.typeid = vm.typeid;
						_self.curDistrict = '行政区域';
				        firstLoadDistrictFun();
						persons.getUsers(persons);
						getListAll();
						var _url = _self.typeid + "/order-detail.html";
						currentPreVw = mui.preload({
							id: _self.typeid + "_order-detail",
							url: _url
						});
					});
				}
			});
			function eventListener() {
				window.addEventListener('tap', function() {
					if(document.getElementById("popover")) {
					    if (!document.getElementById("popover").classList.contains('mui-active')) {
					        var _height = document.getElementById('pullrefresh').style.height;
					        if (_height) {
					            document.getElementById('pullrefresh').style.height ='auto';
					        }
					    }
					}
				});
				dateInitEvent();
			}
			//回调更新,刷新界面(增减工单数，工单号，状态值）
			function refleshView(val, no, status, typeid, isDel, userid) {
			    if (no) {
			        if (status && app.list.length > 0) {
			            var curOrder = null;
			            for (var i = 0; i < app.list.length; i++) {
			                if (no == app.list[i].orderNumber) {
			                    if (isDel == true) { //移除记录
			                        //app.list.splice(i, 1);
			                    } else {
			                        curOrder = app.list[i];
			                        curOrder.status = status;
			                        if (status == WorkOrderStatus.waitSignin.value) {//如果是抢单操作
			                            curOrder.ACCEPT_USER_ID = userid == undefined ? config.USER_ID : userid;
			                        }
			                        Vue.set(app.list, i, curOrder);
			                    }
			                    break;
			                }
			            }
			        }
			    }
			}
		</script>
	</body>

</html>